<template>
	<div class="swiper-container" ref="swiperRef">
		<div class="swiper-wrapper">
			<div class="swiper-slide"
			     v-for="i in pageCount"
			     :ref="el=>pageRef[i-1]=el"
			/>
		</div>
	</div>
</template>

<script>
    import {h, onMounted, onUnmounted, ref, render, nextTick} from "vue";

    export default {
        name: "ViewPager",
        props: {
            onPageScrolled: Function,
            onPageSelected: Function,
            pageCount: Number,
            initialIndex: {
                type: Number,
                default: 0
            },
        },
        setup(props) {
            const {onPageScrolled, onPageSelected, pageCount, initialIndex} = props;
            const pageRef = ref([])
            const swiperRef = ref()
            const Swiper = require('/src/libs/swiper-4.5.3')
            let swiper;
            let useSwiperProgress = true
            const initSwiper = () => {
                let lockIndex = -1
                swiper = new Swiper(swiperRef.value, {
                        initialSlide: initialIndex,
                        resistanceRatio: 0,
                        watchSlidesProgress: true,
                        on: {
                            slideChange() {
                                if (useSwiperProgress) {
                                    if (onPageSelected) {
                                        onPageSelected(this.activeIndex)
                                    }
                                }
                            },
                            progress() {
                                if (useSwiperProgress) {
                                    if (lockIndex === -1) {
                                        lockIndex = this.activeIndex
                                    }
                                    let v = this.slides[lockIndex].progress
                                    if (onPageScrolled) {
                                        onPageScrolled(lockIndex, v)
                                    }
                                    if (v === Math.floor(v)) {
                                        lockIndex = -1;
                                    }
                                }
                            },
                        },
                    }
                )
                if (onPageSelected) {
                    onPageSelected(swiper.activeIndex)
                }
            }
            let timer;
            const setCurrentItem = (index) => {
                if (swiper) {
                    if (timer) {
                        clearTimeout(timer)
                    }
                    useSwiperProgress = false;
                    swiper.slideTo(index, 250, false)
                    timer = setTimeout(() => {
                        useSwiperProgress = true
                        timer = null
                    }, 250)
                }
            }
            const addComponent = (index, component, props) => {
                const page = pageRef.value[index]
                if (!page['child']) {
                    page['child'] = component
                    render(h(component, props), page)
                }
            }

            onMounted(() => {
                nextTick(initSwiper)
            })
            onMounted(() => {
            })
            onUnmounted(() => {
                if (timer) {
                    clearTimeout(timer)
                    timer = null
                }
                if (swiper){
                    swiper.destroy()
                }
            })
            return {
                swiperRef,
                pageRef,
                pageCount,
                setCurrentItem,
                addComponent
            }
        }
    }
</script>
